<template>
  <div class="login-container">
    <!-- 验证需要加 1.:rules="rules"  2.prop="username" -->
    <el-form ref="form" :rules="rules" :model="form" label-width="80px" class="login-form">
      <h2 class="login-title">会员管理系统</h2>
      <el-form-item label="账号" prop="username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="form.password" type="password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('form')">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { login, getUserInfo } from "@/api/login";

export default {
  data() {
    return {
      form: {
        username: "",
        password: ""
      },
      // 验证表单
      rules: {
        username: [
          { required: true, message: "账户不能为空", trigger: "blur" }
        ],
        password: [{ required: true, message: "密码不能为空", trigger: "blur" }]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          // 提交表单给后台进行验证是否正确
          this.$store
            .dispatch("Login", this.form)
            .then(response => {
              if (response.flag) {
                // 有拦截器,有token就可以了,拦截器会获取user信息,直接前往首页即可
                this.$router.push("/");
              } else {
                this.$message({
                  message: response.message,
                  type: "warning"
                });
              }
            })
            .catch(error => {
              // 不处理,有拦截器处理
            });
        } else {
          return false;
        }
      });
    }
  }
};
</script>
<style scoped>
.login-form {
  width: 350px;
  margin: 180px auto;
  background-color: rgb(255, 255, 255, 0.8);
  padding: 30px;
  border-radius: 20px;
}
.login-container {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("../../assets/login.jpeg");
}
.login-title {
  color: #303133;
  text-align: center;
}
</style>